<template>
  <div class="container">
      <div class="title">欢迎使用济宁伊莱特智能生产平台</div>
      <a-row>
        <a-col :span="24">
          <a-steps type="arrow" :current="100">
            <a-step key="1">
              <template #description>
                从U9自动同步销售订单
              </template>
              销售订单
            </a-step>
            <a-step key="2">
              <template #description>
                根据销售订单生成生产任务通知单，<span style="color: #f60000">销售做单</span>
                <br />技术部门填写<span style="color: #f60000">工艺路线</span>
                <br />生产部门完善单据内容并下发
              </template>
              生产任务通知单
            </a-step>
            <a-step key="3">
              <template #description>
                <span style="color: #f60000">车间主任</span>根据生产任务通知单制定生产计划，选择任务单的<span style="color: #f60000">行数据产品和生产工艺的工序做计划</span>，下发后会生成<span style="color: #f60000">工序派工单</span>
                <br /><span style="color: #f60000">后续报工是对派工单报工，派工单要关联生产任务通知单的行Id,用来统计报表</span>
              </template>
              生产计划
            </a-step>
            <a-step key="3">
              <template #description>
                在报工台选择报工单进行报工，<span style="color: #f60000">注意这里有单据拆分逻辑，具体说明在拆单页面查看</span>
              </template>
              生产报工
            </a-step>
          </a-steps>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24">
          <a-card title="生产进度一览">
            <a-table :bordered="{cell:true}" :pagination="false" stripe :data="state.jinduList" style="min-height: 500px">
              <template #columns>
                <a-table-column title="贸易号" data-index="myh"></a-table-column>
                <a-table-column title="销售订单号" data-index="xsddh"></a-table-column>
                <a-table-column title="生产任务通知单" data-index="scdh"></a-table-column>
                <a-table-column title="料品名" data-index="cpmc"></a-table-column>
                <a-table-column title="订单数量(吨)" data-index="count"></a-table-column>
                <a-table-column title="原料到货" data-index="ycl"></a-table-column>
                <a-table-column title="下料" data-index="xl"></a-table-column>
                <a-table-column title="粗锻" data-index="cuduan"></a-table-column>
                <a-table-column title="精锻" data-index="jingduan"></a-table-column>
                <a-table-column title="热处理" data-index="rcl"></a-table-column>
                <a-table-column title="机加工" data-index="jjg"></a-table-column>
              </template>
            </a-table>
          </a-card>
        </a-col>
      </a-row>

      <a-row :gutter="20" style="margin-top: 20px">
        <a-col :span="12">
          <a-card title="产量情况一览">
            <div style="min-height: 300px">产量情况一览</div>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card  title="在制品进度一览">
            <div style="min-height: 300px">在制品进度一览</div>
          </a-card>
        </a-col>
      </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from "vue";
  const userAgent = navigator.userAgent
  const state = reactive({
    jinduList: [
      {id:1, myh:'2025-001', xsddh:'20250012315', scdh:'2025-01-00101', cpmc:'H13', count:'36.3', ycl:'40.2',xl:'40.2',cuduan:'37.5',jingduan:'37.5', rcl:'37.5',jjg:'36.4'},
      {id:1, myh:'2025-002', xsddh:'20250012316', scdh:'2025-01-00102', cpmc:'M01', count:'36.3', ycl:'40.2',xl:'40.2',cuduan:'37.5',jingduan:'37.5', rcl:'37.5',jjg:'36.4'},
      {id:1, myh:'2025-003', xsddh:'20250012317', scdh:'2025-01-00103', cpmc:'H13', count:'36.3', ycl:'0',xl:'',cuduan:'',jingduan:'', rcl:'',jjg:''},
      {id:1, myh:'2025-004', xsddh:'20250012318', scdh:'2025-01-00104', cpmc:'H08', count:'36.3', ycl:'40.2',xl:'40.2',cuduan:'37.5',jingduan:'', rcl:'',jjg:''},
    ],
  })
</script>

<style lang="less" scoped>
// responsive
.container {
  display: block;
  .title{
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #007460;
  }
}
</style>
